<template>
	<view class="works">
		<!--搜索导航栏-->
		<!-- <view class="works-search" @tap="navTo(`/pages/index/search/search?keyword=搜索我的工作&type=works`)">
			<view class="works-search-input">请输入工作关键字</view>
			<view class="iconfont iconsousuo2"></view>
		</view> -->
		<!--导航栏-->
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="tabCurrentIndex === index ? `text-${themeColor.name} current` : ''" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<!--工作列表-->
		<swiper class="swiper-box" duration="300" @change="change" :current="tabCurrentIndex">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="getData()" :lower-threshold="50">
					<view v-for="(item, index) in worksList[tabCurrentIndex]" :key="index" class="works-item">
						<view class="i-top b-b">
							<text class="time in1line">{{item.processDefinitionName}}</text>
							<text class="state" :style="{color:item.color}"
								v-if="parseInt(item.works_status, 10) !== 0">{{ item.businessStatus | worksStatusFilter }}</text>
						</view>
						<view class="works-box-single" @tap.stop="navToDetail(item,tabItem)">
							<view class="right">
								<text class="title in2line">申请人：{{item.startUser.realname}}</text>
								<text class="attr-box"><text class="iconfont icon-history"
										style="margin-right: 12upx;"></text> {{item.startTime | time }}</text>
							</view>
						</view>
					</view>
					<oa-load-more v-if="worksList.length > 0" :status="loadingType[tabCurrentIndex]"></oa-load-more>
					<oa-empty :info="'还没有内容~'" v-if="worksList.length === 0 && !loading"></oa-empty>
				</scroll-view>
			</swiper-item>
		</swiper>
		<oa-loading isFullScreen :active="loading"></oa-loading>
	</view>
</template>
<script>
	/**
	 *@des 
	 *@author yiiframe 21931118@qq.com
	 *@blog http://www.yiiframe.com
	 *@date 2019/1/1 07:25:00
	 */
	import {
		todoList,
		applyList,
		doneList,
		ccList
	} from '@/api/approve.js';
	import moment from '@/common/moment';
	import mConstData from '@/config/constData.config';
	export default {
		components: {},
		data() {
			return {
				tabCurrentIndex: 0,
				page: 1,
				pageSize: 30,
				hasLogin: true,
				loading: false,
				worksList: [],
				ifFirst: ['true', 'true', 'true', 'true'],
				loadingType: 'more',
				navList: this.$mConstDataConfig.worksNavList,
				key: 0,
			};
		},
		filters: {
			// 时间格式化
			time(val) {
				return moment(val).format('YYYY-MM-DD HH:mm:ss');
			},
			// 状态显示格式化
			worksStatusFilter(worksStatus) {
				let state;
				mConstData.worksStatus.forEach(worksItem => {
					if (worksItem.key === worksStatus) {
						state = worksItem.value;
					}
				});
				return state;
			},
		},

		onShow(options) {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.themeColor.color,
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			});
			uni.setTabBarStyle({
				selectedColor: this.themeColor.color,
				borderStyle: 'white'
			});
			this.themeColor.tabList && this.themeColor.tabList.forEach((selectedIconPath, index) => {
				uni.setTabBarItem({
					index,
					selectedIconPath
				});
			});
			
			// this.tabCurrentIndex = parseInt(0, 10);
			uni.$on('isRefresh', function(data) {
				// TODO 下面执行刷新的方法
				if (data > 0) {
					this.tabCurrentIndex = data
					this.ifFirst = ['true', 'true', 'true', 'true']
				} 
			})
			this.initData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.worksList[this.tabCurrentIndex] = [];
			this.getworksList();
		},
		// // 加载更多
		// onReachBottom() {
		// 	//scroll-view 触发不了这个方法 ，使用@scrolltolower
		// 	if (this.loadingType === 'nomore' || this.worksList.length === 0) return;
		// 	this.page++;
		// 	this.getworksList();
		// },
		methods: {
			change(current) {
				this.tabCurrentIndex = current.detail.current;
				console.log(current, this.tabCurrentIndex)
				if (this.ifFirst[this.tabCurrentIndex]) {
					this.page = 1;
					this.worksList[this.tabCurrentIndex] = [];
					this.getworksList();
					this.ifFirst[this.tabCurrentIndex] = false
				}
			},
			// 顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				if (this.ifFirst[this.tabCurrentIndex]) {
					this.page = 1;
					this.worksList[this.tabCurrentIndex] = [];
					this.getworksList();
					this.ifFirst[this.tabCurrentIndex] = false
				}
			},
			getData() {
				if (this.loadingType[this.tabCurrentIndex] === 'nomore' || this.worksList[this.tabCurrentIndex].length ===
					0) return;
				this.page++;
				this.getworksList();
			},
			// 状态显示格式化
			worksStatusColor(worksStatus) {
				let color;
				mConstData.worksStatus.forEach(worksItem => {
					if (worksItem.key === worksStatus) {
						color = worksItem.color;
					}
				});
				return color;
			},
			// 跳转页面
			navToDetail(item) {
				// 在uni.navigateTo方法中传参
				// uni.navigateTo({
				//   url: `/pages/works/processed?processInstanceId=${item.processInstanceId}&taskId=${item.taskId}&processType=${item.processDefinitionName}&type=doneTask`
				// })
				let taskId = item.taskId ? item.taskId : ''
				let businessStatus = item.businessStatus
				this.$mRouter.push({
					route: `/pages/works/processed?processInstanceId=${item.processInstanceId}&taskId=${taskId}&processType=${item.processDefinitionName}&type=doneTask&tabType=${this.tabCurrentIndex}&businessStatus=${businessStatus}`,
				});
			},
			navTo(route) {
				this.$mRouter.push({
					route
				});
			},

			// 数据初始化
			async initData() {
				this.hasLogin = this.$mStore.getters.hasLogin;
				this.page = 1;
				// this.worksList[this.tabCurrentIndex].length = 0;
				if (!uni.getStorageSync('userInfo')) {
					uni.removeStorageSync('accessToken')
					uni.removeStorageSync('userInfo')
					uni.reLaunch({
						url: '/pages/public/login'
					});
					// this.$mRouter.push({
					// 	route: '/pages/public/login'
					// });
					return
				}
				await this.getworksList();
				this.ifFirst[this.tabCurrentIndex] = false

				// if (!this.hasLogin) {
				// 	uni.removeStorageSync('backToPage');
				// 	this.$mRouter.push({
				// 		route: '/pages/public/login'
				// 	});
				// }
			},
			// 获取工作列表
			async getworksList(index) {
				if (!uni.getStorageSync('userInfo')) {
					return
				}
				this.loading = true
				var tabCurrentIndex = 0
				if (index) {
					tabCurrentIndex = index
				} else {
					tabCurrentIndex = this.tabCurrentIndex
				}
				let currentUserInfo = uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo') : ''
				currentUserInfo.id = currentUserInfo.userId.toString();
				const params = {
					currentUserInfo,
					pageNo: this.page,
					pageSize: this.pageSize,
				};
				if (this.page == 1) {
					this.worksList[tabCurrentIndex] = []
				}
				if (tabCurrentIndex == 0) {

					todoList(params).then(res => {
						this.loading = false;
						this.worksList[tabCurrentIndex] = this.worksList[tabCurrentIndex].concat(res
							.item.records)
						this.worksList[tabCurrentIndex].forEach(item => {
							item.color = this.worksStatusColor(item.businessStatus)
						})
						this.loadingType[tabCurrentIndex] = res.item.total > this.worksList[tabCurrentIndex]
							.length ?
							'more' : 'nomore';
						this.key = this.key++
					}).catch(() => {
						this.loading = false;
					})
				} else if (tabCurrentIndex == 1) {
					applyList(params).then(res => {
						this.loading = false;
						this.worksList[tabCurrentIndex] = this.worksList[tabCurrentIndex].concat(res
							.item.records)
						this.worksList[tabCurrentIndex].forEach(item => {
							item.color = this.worksStatusColor(item.businessStatus)
						})
						this.loadingType[tabCurrentIndex] = res.item.total > this.worksList[tabCurrentIndex]
							.length ?
							'more' : 'nomore';
						this.key = this.key++
					}).catch(() => {
						this.loading = false;
					})
				} else if (tabCurrentIndex == 2) {
					doneList(params).then(res => {
						this.loading = false;
						this.worksList[tabCurrentIndex] = this.worksList[tabCurrentIndex].concat(res
							.item.records)
						this.worksList[tabCurrentIndex].forEach(item => {
							item.color = this.worksStatusColor(item.businessStatus)
						})
						this.loadingType[tabCurrentIndex] = res.item.total > this.worksList[tabCurrentIndex]
							.length ?
							'more' : 'nomore';
						this.key = this.key++
					}).catch(() => {
						this.loading = false;
					})
				} else if (tabCurrentIndex == 3) {
					ccList(params).then(res => {
						this.loading = false;
						this.worksList[tabCurrentIndex] = this.worksList[tabCurrentIndex].concat(res
							.item.records)
						this.worksList[tabCurrentIndex].forEach(item => {
							item.color = this.worksStatusColor(item.businessStatus)
						})
						this.loadingType[tabCurrentIndex] = res.item.total > this.worksList[tabCurrentIndex]
							.length ?
							'more' : 'nomore';
						this.key = this.key++
					}).catch(() => {
						this.loading = false;
					})
				}

				uni.stopPullDownRefresh();
				// this.loadingType = this.worksList.length === 4 ? 'more' : 'nomore';

			},

		}
	};
</script>
<style lang="scss">
	page,
	.works {
		background: $page-color-base;
		height: 100%;

		// .works-search {
		// 	padding: $spacing-sm $spacing-base;
		// 	position: relative;

		// 	.works-search-input {
		// 		width: 100%;
		// 		background-color: $color-white;
		// 		bworks-radius: 40upx;
		// 		padding: $spacing-sm 0 $spacing-sm $spacing-lg;
		// 		color: $font-color-light;
		// 	}

		// 	.iconfont {
		// 		position: absolute;
		// 		right: 48upx;
		// 		top: 22upx;
		// 	}
		// }

		.swiper-box {
			height: calc(100% - 80upx);
		}

		.list-scroll-content {
			height: 100%;
			margin-top: 20upx;

			// 工作列表
			.works-item {
				display: flex;
				flex-direction: column;
				padding: 0 30upx;
				background: #fff;
				width: calc(94%);
				height: calc(22vw + 40upx);
				margin: 0 auto $spacing-base;
				border-radius: 15upx;
				box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);

				.i-top {
					display: flex;
					align-items: center;
					height: 80upx;
					padding-right: 30upx;
					font-size: $font-base;
					color: $font-color-dark;
					position: relative;

					.time {
						flex: 1;
					}

					.del-btn {
						padding: 10upx 0 10upx 36upx;
						font-size: $font-lg;
						color: $font-color-light;
						position: relative;

						&:after {
							content: '';
							width: 0;
							height: 30upx;
							border-left: 1px solid $border-color-dark;
							position: absolute;
							left: 20upx;
							top: 50%;
							transform: translateY(-50%);
						}
					}
				}

				/* 单条 */
				.works-box-single {
					display: flex;
					margin: 10upx 0;
					// border-bottom: 1px solid rgba(0, 0, 0, 0.05);
					box-shadow: 0 1px 5px rgba(0, 0, 0, 0.02);

					.works-img {
						display: block;
						width: 180upx;
						height: 140upx;
					}

					.red {
						margin: 0 10upx 0 0;
						font-size: $font-sm;
					}

					.point {
						margin: 0 10upx 0 0;
						font-size: $font-sm;
					}

					.right {
						flex: 1;
						display: flex;
						flex-direction: column;
						padding: 0 30upx 0 0;
						overflow: hidden;

						.title {
							font-size: $font-sm;
							line-height: 32upx;
							height: 60upx;
							color: $font-color-light;
						}

						.attr-box {
							font-size: $font-sm + 4upx;
							color: $font-color-dark;

							.iconfont {
								font-size: $font-sm + 4upx;
								color: #292929;
							}
						}

						.price {
							font-size: $font-sm;
						}
					}
				}

				.price-box {
					display: flex;
					justify-content: flex-end;
					align-items: baseline;
					padding: 15upx 30upx;
					font-size: $font-sm + 2upx;
					color: $font-color-light;

					.num {
						margin: 0 8upx;
						color: $font-color-dark;
					}

					.price {
						font-size: $font-lg;
						color: $font-color-dark;
					}
				}

				.action-box {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					height: 100upx;
					position: relative;

					.action-btn {
						width: 150upx;
						height: 56upx;
						margin: 0 0 0 $spacing-base;
						padding: 0;
						text-align: center;
						line-height: 56upx;
						font-size: $font-sm + 2upx;
					}

					.action-btn::after {
						border: 1upx solid;
					}
				}
			}
		}

		.uni-swiper-item {
			height: auto;
		}
	}
</style>